Personalizar las etiquetas de post-footer

Hace un tiempo vimos la forma de añadir iconos a las etiquetas del post-footer, hoy vamos a añadirle unos sencillos estilos de forma que las resaltaremos.

En edición de html marcamos para expandir la plantilla y buscamos la parte que afecta a las etiquetas.

Resaltado en negrita está la etiqueta <data:label.name/> que es la encargada de generar las etiquetas, a continuación añadiremos lo marcado en color rojo.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='etiquetas'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>  , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Ahí mismo podemos eliminar la coma que separa las etiquetas, está marcado con fondo negro.
Si queremos en el lugar de la coma podemos añadir algo decorativo una imagen o carácter unicode.

<span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#10087;</span>

Guardamos los cambios y añadimos los estilos para las etiquetas justo antes de ]]></b:skin>

.etiquetas {

padding:4px;

color:#ffffff;

opacity:0.6;

text-shadow:0 3px 2px #000000;

background:none repeat scroll 0 0 #990000;

}

.etiquetas: hover {

opacity:0.9;

}

En background cambiamos el color de fondo, el color de fuente en "color" text-shadow lo utilizamos para dar sombra el al texto y opacity para el efecto hover.

Cualquier estilo podemos añadirlo y ver el resultado o seguir cambiando.

.etiquetas {

padding:4px;

color:#ffffff;

-moz-border-radius: 5px 5px 5px 5px;

background:none repeat scroll 0 0 #990000;

text-shadow: -1px -1px 1px #555;

-moz-box-shadow: 3px 3px 3px #000000;

}

.etiquetas:hover {

opacity:0.9;

}